<#assign pageTitle = "${picture.title!}-${siteCompany.siteName!}" />
<#assign pageKeywords = "${picture.title!},${picture.categoryName!}" />
<#assign pageDescription = "${siteCompany.siteName!}${channel.channelName!}${picture.categoryName!}：${picture.title!}" />
<#assign channelId = 10 />
<#assign pageHeader>
    <link rel="stylesheet" href="/static/css/picture/viewer.css">
</#assign>
<#assign pageContent>
    <div class="body-wrap docs-pictures">
        <div class="content-wrap">
            <div class="crumbs pd-20">
                <i class="layui-icon layui-icon-home"></i>
                <a href="#" target="_blank">首页</a>
                <span class="sep">/</span>
                <a href="${channel.linkUrl!}" title="${channel.channelName!}"
                   target="_blank">${channel.channelName!}</a>
                <span class="sep">/</span>
                <a href="/picture/index.html?categoryId=${picture.categoryId}" target="_blank">${picture.categoryName!}</a>
                <span class="sep">/</span>
                详情
            </div>
            <div class="work-info-wrap mb-20 clearfix">
                <div class="work-imgs">
                    <h1 class="work-name">${picture.title!}</h1>
                    <div class="img-wrap">
                        <img class="viewer" src="${picture.viewUrl!}" data-original="${picture.viewUrl!}" data-id="${picture.id}" alt="${picture.title!}">
                    </div>
                    <div class="work-badge mt-20">
                        <#if categoryRoots?? && categoryRoots?size gt 0>
                            <#list categoryRoots as categorys>
                                <a href="/picture/index.html?categoryId=${categorys.categoryId}">${categorys.categoryName}</a>
                            </#list>
                        </#if>
                    </div>
                    <div class="declare-info">
                        声明：本网站部分内容由互联网用户自发贡献自行上传，本网站不拥有所有权，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：service@youtike.com
                        进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
                    </div>
                </div>
                <div class="work-detail-right">
                    <div class="download-wrap mb-20">
                        <#if picture.price gt 0 && !isVip>
                            <a href="javascript:void(0)" onclick="buyPicture(${picture.id})" class="download-btn"><i class="layui-icon layui-icon-rmb"></i>${picture.price/100}元下载</a>
                        <#else>
                            <a href="javascript:void(0)" onclick="downPicture(${picture.id})" class="download-btn"><i class="layui-icon layui-icon-play"></i> 查看原图</a>
                        </#if>
                        <#if isFavorite?? && isFavorite?string == "true">
                            <a id="favorite-id" href="javascript:void(0)" onclick="deleteFavorite(${picture.id},4,this)" class="layui-btn layui-btn-lg layui-btn-primary favorite-btn fr">
                                取消收藏
                            </a>
                            <#else>
                            <a id="favorite-id" href="javascript:void(0)" onclick="favorites(${picture.id},4,this)" class="layui-btn layui-btn-lg layui-btn-primary favorite-btn fr">
                                收藏
                            </a>
                        </#if>
                    </div>
                    <div class="work-detail-info">
                        <ul class="details-wrap">
                            <#if !isVip>
                                <li><span style="color: #eb7350">开通会员全站高清素材免费下载</span><a href="javascript:void(0)" onclick="buyMember(1)" style="margin-left: 10px" class="layui-btn layui-btn-danger layui-btn-xs">立即开通</a></li>
                             </#if>
                            <li><span>所属专业：</span><span class="color-mode">${subjectName!}</span></li>
                            <li><span>所属分类：</span><span class="">${picture.categoryName!}</span></li>
                            <li><span>尺寸像素：</span><span class="img-size">${picture.imgWidth!} x ${picture.imgHeight!}</span></li>
                            <li><span>文件大小：</span><span class="file-size">${picture.fileSize/1024/1024}M</span></li>
                            <li><span>文件格式：</span><span class="file-type">${picture.fileExt!}</span></li>
                            <li><span>推荐软件：</span><span>Windows 照片查看器 等看图软件</span></li>
                            <li><span>更新日期：</span><span class="upload-time">${picture.updateTime?date}</span></li>
                        </ul>
                    </div>
                    <#if album??>
                        <div class="work-detail-info">
                        <div class="title"><strong>关联专集</strong></div>
                        <div class="album-list">
                            <div class="list-items">
                                <a href="/picture/album/view/${album.id}.html" class="list-item">
                                    <div class="list-content">
                                        <div class="list-album-img-box">
                                            <#list album.pictures as pic>
                                                <img lay-src="${pic.coverUrl!}" alt="">
                                            </#list>
                                        </div>
                                        <div class="list-album-info">${album.title!}</div>
                                        <div class="list-album-type">专集</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    </#if>
                </div>
            </div>
        </div>
        <div class="content-wrap">
            <h3 class="picture-other-title">来自相同主题的作品</h3>
        </div>
        <div class="content-wrap">
            <ul class="works clearfix">
                <#if pictureList?? && pictureList?size gt 0>
                    <#list pictureList as item>
                        <li class="work">
                            <div class="work-content">
                                <div class="work-img">
                                    <img class="lazy viewer" data-original="${item.viewUrl!}" src="${item.coverUrl!}"  data-id="${item.id}" alt="${item.title!}">
                                </div>
                                <div class="picName">${item.title!}</div>
                                <div class="active">
                                    <a class="layui-btn layui-btn-primary" href="javascript:void(0);" onclick="favorites(${item.id})">收藏</a>
                                    <a class="layui-btn layui-btn-normal" href="/picture/view/${item.id}.html" target="_blank">详情</a>
                                </div>
                            </div>
                        </li>
                    </#list>
                </#if>
            </ul>
        </div>
    </div>
    <div class="detail-float-header">
        <div class="content-wrap">
            <div class="detail-header-name">${picture.title!}</div>
            <div class="detail-header-btn">
                <#if picture.price gt 0 && !isVip>
                    <a href="javascript:void(0)" onclick="buyPicture(${picture.id})" class="download-btn"><i class="layui-icon layui-icon-rmb"></i>${picture.price/100}元下载</a>
                <#else>
                    <a href="javascript:void(0)" onclick="downPicture(${picture.id})" class="download-btn"><i class="layui-icon layui-icon-play"></i> 查看原图</a>
                </#if>
                <#if isFavorite?? && isFavorite?string == "true">
                    <a id="favorite-id" href="javascript:void(0)" onclick="deleteFavorite(${picture.id},4,this)" class="layui-btn layui-btn-lg layui-btn-primary favorite-btn">
                        取消收藏
                    </a>
                <#else>
                    <a id="favorite-id" href="javascript:void(0)" onclick="favorites(${picture.id},4,this)" class="layui-btn layui-btn-lg layui-btn-primary favorite-btn">
                        收藏
                    </a>
                </#if>
            </div>
        </div>
    </div>
</#assign>
<#assign pageFooter>
    <script type="text/javascript">
        var title = "${picture.title!}";
        var userId = ${userId};
    </script>
    <script src="/static/js/picture/viewer.js"></script>
    <script src="/static/js/picture/picture-view.js"></script>
    <script src="/static/js/order.js"></script>
    <script src="/static/js/picture/picture.js"></script>
</#assign>
<#include "../layouts/layout.ftl">


